<template>
  <div>
    <div>
<!--        <span @click="setDate">今日</span>-->
        <el-button :type="type" round @click="setDate" size="mini">一日</el-button>
<!--        <span @click="setWeek">本周</span>-->
        <el-button :type="type" round @click="setWeek" size="mini">一周</el-button>
<!--        <span @click="setMonth">本月</span>-->
        <el-button :type="type" round @click="setMonth" size="mini">一月</el-button>
<!--        <span @click="setYear">本年</span>        -->
        <el-button :type="type" round @click="setYear" size="mini">一年</el-button>

        <el-date-picker
          v-model="date"
          type="daterange"
          class="date"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :size=size
          @blur="setDateRange()"
        >
        </el-date-picker>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: "DatePicker",
  props:['size','type'],
  data(){
    return{
      date:[],
    }
  },
  methods:{
    setDate(){//'YYYY-MM-DD'
      //设置开始为当日零点零分零秒
      let start=dayjs().hour(0).minute(0).second(0).millisecond(0).format();
      let end=dayjs().format();
      this.date=[start,end]
      this.$emit("returnDate",this.date);
    },
    setWeek(){
      //设置开始为当日零点零分零秒
      let start=dayjs().hour(-144).minute(0).second(0).millisecond(0).format();
      let end=dayjs().format();
      // let start=dayjs().startOf('week').format();;
      // let end=dayjs().endOf('week').format();
      this.date=[start,end]
      this.$emit("returnDate",this.date);
    },
    setMonth(){
      //设置开始为当日零点零分零秒
      let month=dayjs().month();
      let start=dayjs().month(month-1).hour(0).minute(0).second(0).millisecond(0).format();
      let end=dayjs().format();
      this.date=[start,end]
      this.$emit("returnDate",this.date);
    },
    setYear(){
      //设置开始为当日零点零分零秒
      let year=dayjs().year();
      let start=dayjs().year(year-1).hour(0).minute(0).second(0).millisecond(0).format();
      let end=dayjs().format();
      this.date=[start,end]
      this.$emit("returnDate",this.date);
    },
    setDateRange(){
      this.date[1]=dayjs(this.date[1]).hour(23).minute(59).second(59).millisecond(0).$d;
      this.$emit("returnDate",this.date);
    }
  },
}
</script>

<style scoped>
/*.right{*/
/*  position: relative;*/
/*  display:flex;*/
/*  justify-content:end;*/
/*}*/
/*.right span{*/
/*  margin:0 1%;*/
/*}*/
.date{
  width:250px;
  margin:0 20px;
}
</style>